<!DOCTYE html>
<html>
<head>

  <meta charset="utf-8">
  <!--Adapt to mobile phone size, not allowed to zoom-->
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
  <title>web relay</title>
  
  <script src="jquery-3.3.1.js"></script>
  
  <style type="text/css">
    body,div{border:0; margin:0; padding:0;}
  </style>
  
  <style type="text/css">
    button {
      display: block;
      margin: 5px 5px 5px 5px;
      width: 200px;
      height: 55px;
      font-size: 24pt;
      font-weight: bold;
      color: black;
    }

    .LOW {
      background-color: Red;
    }
        
    .HIGH {
      background-color: White;
    }
  </style>
  
</head>

<body>
  <div style="width:100%; height:40px; line-height:40px; text-align:center; font-size:20px; color:white; background-color:blue; margin:auto">
    Controlling the Relay with the web
  </div>

  <div id="content" align="center">
    <button type = "button" class = "HIGH" id = "Relay1" onclick = Button_Click("1")>1#U盘切换</button>
    <button type = "button" class = "HIGH" id = "Relay2" onclick = Button_Click("2")>2#U盘切换</button>
    <button type = "button" class = "HIGH" id = "Relay3" onclick = Button_Click("3")>3#U盘切换</button>
    <button type = "button" class = "HIGH" id = "Relay4" onclick = Button_Click("4")>3#U盘启停</button>
    <button type = "button" class = "HIGH" id = "Relay5" onclick = Button_Click("5")>树莓派重启</button>
    <button type = "button" class = "HIGH" id = "Relay6" onclick = Button_Click("6")>控控重启</button>
    <button type = "button" class = "HIGH" id = "Relay7" onclick = Button_Click("7")>U盘控制重启</button>
    <button type = "button" class = "HIGH" id = "Relay8" onclick = Button_Click("8")>手动U盘启停</button>
  </div>
  
</body>


<script>
  
var Relay_Status = {
  Relay1: 1,
  Relay2: 1,
  Relay3: 1,
  Relay4: 1,
  Relay5: 1,
  Relay6: 1,
  Relay7: 1,
  Relay8: 1
};

function Button_Click(button_num1) {
  var button_num =   "Relay"+button_num1
  var button_id = "#" + button_num;
      
  if(Relay_Status[button_num] == 1) {
    $(button_id).removeClass("HIGH");
    $(button_id).addClass("LOW");
    Relay_Status[button_num] = 0;
    setTimeout(function(){Button_Click(button_num1)},1000);
  }
  else if(Relay_Status[button_num] == 0) {
    $(button_id).removeClass("LOW");
    $(button_id).addClass("HIGH");
    Relay_Status[button_num] = 1;
  }
  
  $.post('Relay', {Relay: button_num1,
                  RelayState: Relay_Status[button_num]})
}

</script>

</html>
